<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 站点图标 -->
    <link rel="icon" type="image/png" sizes="32x32" href="{{ url_for('static', filename='images/favction.png') }}">
    <link rel="icon" type="image/png" sizes="16x16" href="{{ url_for('static', filename='images/favction.png') }}">
    <title>{% block title %}SkitPanel 短剧管理面板{% endblock %}</title>
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- Base CSS -->
    <link rel="stylesheet" href="{{ url_for('static', filename='css/base.css') }}">
    <!-- Page specific CSS will be loaded here -->
    {% block styles %}{% endblock %}
    
    <!-- 自定义Tailwind配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3b82f6',
                        secondary: '#10b981',
                        dark: '#1e293b',
                        light: '#f8fafc',
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    
    <!-- 自定义工具类 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .sidebar-shadow {
                box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            }
            .nav-item {
                @apply flex items-center px-4 py-3 text-gray-700 hover:bg-primary/10 hover:text-primary rounded-lg transition-all duration-200;
            }
            .nav-item.active {
                @apply bg-primary/20 text-primary font-medium;
            }
            .nav-icon {
                @apply w-6 h-6 mr-3;
            }
            .sidebar-transition {
                transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
            }
        }
    </style>
    
    {% block head %}{% endblock %}
</head>
<body class="bg-gray-50 min-h-screen flex flex-col">
    <!-- 头部导航 -->
    <header class="bg-white shadow-lg z-10 border-b-2 border-primary/20">
        <div class="container mx-auto px-4 py-4 flex justify-between items-center">
            <!-- 移动端菜单按钮 -->
            <button id="menu-button" class="md:hidden text-gray-600 hover:text-primary p-2 rounded-full hover:bg-gray-100 transition-colors duration-200 mr-2">
                <i class="fa fa-bars text-xl"></i>
            </button>
            
            <div class="flex items-center space-x-2">
                <i class="fa fa-film text-primary text-2xl"></i>
                <h1 class="text-xl font-bold text-dark">Skit-Panel 短剧管理面板{% if app_version %}<span class="text-base text-gray-500 ml-2">{{ app_version }} 版本</span>{% endif %}</h1>
            </div>
            <div class="flex items-center space-x-4">
                <button id="help-button" class="text-gray-600 hover:text-primary p-2 rounded-full hover:bg-gray-100 transition-colors duration-200"
                        title="帮助文档">
                    <i class="fa fa-question-circle text-xl"></i>
                </button>
                <a href="https://gitee.com/DoubleStackWorkShop/Skit-Panel" target="_blank" class="text-gray-600 hover:text-primary p-2 rounded-full hover:bg-gray-100 transition-colors duration-200"
                   title="Gitee 项目主页">
                    <i class="fa fa-github text-xl"></i>
                </a>
                
                <!-- 用户中心下拉菜单 -->
                {% if current_user %}
                <div class="user-dropdown relative">
                    <button id="user-dropdown-button" class="user-dropdown-button flex items-center space-x-2 p-1 rounded-full hover:bg-gray-100 transition-colors duration-200">
                        {% if current_user and current_user.avatar %}
                    <div class="w-8 h-8 rounded-full overflow-hidden border-2 border-primary/20">
                        <img src="{{ current_user.avatar }}" alt="用户头像" class="w-full h-full object-cover">
                    </div>
                    {% else %}
                    <div class="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center text-primary">
                        <i class="fa fa-user"></i>
                    </div>
                    {% endif %}
                        <span class="hidden md:inline-block font-medium text-gray-700">
                            {{ current_user.username }}
                        </span>
                        <i class="fa fa-chevron-down text-xs text-gray-500 transition-transform duration-200"></i>
                    </button>
                    <div id="user-dropdown-content" class="user-dropdown-content absolute right-0 mt-2 w-48 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 hidden">
                        <a href="{{ url_for('user_center') }}" class="user-dropdown-item flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
                            <i class="fa fa-user-circle mr-2 text-primary"></i>
                            <span>用户中心</span>
                        </a>
                        <a href="{{ url_for('change_password') }}" class="user-dropdown-item flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
                            <i class="fa fa-key mr-2 text-primary"></i>
                            <span>修改密码</span>
                        </a>
                        <div class="border-t border-gray-100"></div>
                        <a href="{{ url_for('logout') }}" class="user-dropdown-item flex items-center px-4 py-2 text-sm text-red-600 hover:bg-gray-100">
                            <i class="fa fa-sign-out mr-2"></i>
                            <span>退出登录</span>
                        </a>
                    </div>
                </div>
                {% else %}
                <a href="{{ url_for('login') }}" class="flex items-center space-x-2 px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors duration-200">
                    <i class="fa fa-sign-in"></i>
                    <span>登录</span>
                </a>
                {% endif %}
            </div>
        </div>
    </header>

    <!-- 主内容区 -->
    <div class="flex flex-1 overflow-hidden">
        <!-- 侧边栏折叠/展开按钮 -->
        <button id="toggle-desktop-sidebar" class="bg-white w-8 flex items-center justify-center sidebar-shadow hidden md:flex sidebar-transition sidebar-toggle-btn z-20">
            <i id="sidebar-icon" class="fa fa-chevron-left text-primary transition-transform duration-300"></i>
        </button>
        
        <!-- 侧边栏 -->
        <aside id="desktop-sidebar" class="w-64 bg-white sidebar-shadow hidden md:block sidebar-transition z-10">
            <nav class="p-4 space-y-2">
                <div class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-4 px-4">功能菜单</div>
                
                <a href="/" class="nav-item {% if request.path == '/' %}active{% endif %}">
                    <div class="menu-icon-wrapper"><i class="fa fa-home nav-icon"></i></div>
                    <span class="sidebar-text">首页</span>
                </a>
                
                <a href="/douban" class="nav-item {% if request.path == '/douban' %}active{% endif %}">
                    <div class="menu-icon-wrapper"><i class="fa fa-search nav-icon"></i></div>
                    <span class="sidebar-text">豆瓣刮削</span>
                </a>
                
                <a href="/tmdb" class="nav-item {% if request.path == '/tmdb' %}active{% endif %}">
                    <div class="menu-icon-wrapper"><i class="fa fa-search nav-icon"></i></div>
                    <span class="sidebar-text">TMDB</span>
                </a>
                
                <a href="/madouqu" class="nav-item {% if request.path == '/madouqu' %}active{% endif %}">
                    <div class="menu-icon-wrapper"><i class="fa fa-search nav-icon"></i></div>
                    <span class="sidebar-text">国产刮削</span>
                </a>
                
                <a href="/javdb" class="nav-item {% if request.path == '/javdb' %}active{% endif %}">
                    <div class="menu-icon-wrapper"><i class="fa fa-search nav-icon"></i></div>
                    <span class="sidebar-text">其他刮削</span>
                </a>
                
                <a href="/local-resources" class="nav-item {% if request.path == '/local-resources' %}active{% endif %}">
                    <div class="menu-icon-wrapper"><i class="fa fa-folder-open nav-icon"></i></div>
                    <span class="sidebar-text">本地资源</span>
                </a>
                
                <a href="/local-cinema" class="nav-item {% if request.path == '/local-cinema' %}active{% endif %}">
                    <div class="menu-icon-wrapper"><i class="fa fa-eye nav-icon"></i></div>
                    <span class="sidebar-text">本地影院</span>
                </a>
                
                <a href="/ptskit" class="nav-item {% if request.path == '/ptskit' %}active{% endif %}">
                    <div class="menu-icon-wrapper"><i class="fa fa-magnet nav-icon"></i></div>
                    <span class="sidebar-text">站点种子</span>
                </a>
                
                <a href="/qbittorrent" class="nav-item {% if request.path == '/qbittorrent' %}active{% endif %}">
                    <div class="menu-icon-wrapper"><i class="fa fa-download nav-icon"></i></div>
                    <span class="sidebar-text">qBittorrent</span>
                </a>
                
                <a href="/transmission" class="nav-item {% if request.path == '/transmission' %}active{% endif %}">
                    <div class="menu-icon-wrapper"><i class="fa fa-download nav-icon"></i></div>
                    <span class="sidebar-text">Transmission</span>
                </a>
                
                <a href="/fnos_media" class="nav-item {% if request.path == '/fnos_media' %}active{% endif %}">
                    <div class="menu-icon-wrapper"><i class="fa fa-film nav-icon"></i></div>
                    <span class="sidebar-text">飞牛媒体库</span>
                </a>

                <a href="/emby_media" class="nav-item {% if request.path == '/emby_media' %}active{% endif %}">
                    <div class="menu-icon-wrapper"><i class="fa fa-film nav-icon"></i></div>
                    <span class="sidebar-text">Emby媒体库</span>
                </a>
                
                <a href="/config" class="nav-item {% if request.path == '/config' %}active{% endif %}">
                    <div class="menu-icon-wrapper"><i class="fa fa-cog nav-icon"></i></div>
                    <span class="sidebar-text">系统配置</span>
                </a>
            </nav>
        </aside>
        
        <!-- 移动端侧边栏 -->
        <aside id="mobile-sidebar" class="fixed inset-y-0 left-0 w-64 bg-white sidebar-shadow transform -translate-x-full md:hidden transition-transform duration-300 ease-in-out z-40">
            <div class="p-4 flex justify-between items-center border-b">
                <h2 class="font-bold text-dark">菜单</h2>
                <button id="close-sidebar" class="text-gray-500 hover:text-gray-700">
                    <i class="fa fa-times text-xl"></i>
                </button>
            </div>
            <nav class="p-4 space-y-2">
                <div class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-4 px-4">功能菜单</div>
                
                <a href="/" class="nav-item {% if request.path == '/' %}active{% endif %}">
                    <div class="menu-icon-wrapper"><i class="fa fa-home nav-icon"></i></div>
                    <span class="sidebar-text">首页</span>
                </a>
                
                <a href="/douban" class="nav-item {% if request.path == '/douban' %}active{% endif %}">
                    <div class="menu-icon-wrapper"><i class="fa fa-search nav-icon"></i></div>
                    <span class="sidebar-text">豆瓣刮削</span>
                </a>
                
                <a href="/tmdb" class="nav-item {% if request.path == '/tmdb' %}active{% endif %}">
                    <div class="menu-icon-wrapper"><i class="fa fa-search nav-icon"></i></div>
                    <span class="sidebar-text">TMDB</span>
                </a>
                
                <a href="/madouqu" class="nav-item {% if request.path == '/madouqu' %}active{% endif %}">
                    <div class="menu-icon-wrapper"><i class="fa fa-search nav-icon"></i></div>
                    <span class="sidebar-text">国产刮削</span>
                </a>
                
                <a href="/javdb" class="nav-item {% if request.path == '/javdb' %}active{% endif %}">
                    <div class="menu-icon-wrapper"><i class="fa fa-search nav-icon"></i></div>
                    <span class="sidebar-text">其他刮削</span>
                </a>
                
                <a href="/local-resources" class="nav-item {% if request.path == '/local-resources' %}active{% endif %}">
                    <div class="menu-icon-wrapper"><i class="fa fa-folder-open nav-icon"></i></div>
                    <span class="sidebar-text">本地资源</span>
                </a>
                
                <a href="/local-cinema" class="nav-item {% if request.path == '/local-cinema' %}active{% endif %}">
                    <div class="menu-icon-wrapper"><i class="fa fa-eye nav-icon"></i></div>
                    <span class="sidebar-text">本地影院</span>
                </a>
                
                <a href="/ptskit" class="nav-item {% if request.path == '/ptskit' %}active{% endif %}">
                    <div class="menu-icon-wrapper"><i class="fa fa-magnet nav-icon"></i></div>
                    <span class="sidebar-text">站点种子</span>
                </a>
                
                <a href="/qbittorrent" class="nav-item {% if request.path == '/qbittorrent' %}active{% endif %}">
                    <div class="menu-icon-wrapper"><i class="fa fa-download nav-icon"></i></div>
                    <span class="sidebar-text">qBittorrent</span>
                </a>
                
                <a href="/transmission" class="nav-item {% if request.path == '/transmission' %}active{% endif %}">
                    <div class="menu-icon-wrapper"><i class="fa fa-download nav-icon"></i></div>
                    <span class="sidebar-text">Transmission</span>
                </a>
                
                <a href="/fnos_media" class="nav-item {% if request.path == '/fnos_media' %}active{% endif %}">
                    <div class="menu-icon-wrapper"><i class="fa fa-film nav-icon"></i></div>
                    <span class="sidebar-text">飞牛媒体库</span>
                </a>

                <a href="/emby_media" class="nav-item {% if request.path == '/emby_media' %}active{% endif %}">
                    <div class="menu-icon-wrapper"><i class="fa fa-film nav-icon"></i></div>
                    <span class="sidebar-text">Emby媒体库</span>
                </a>
                
                <a href="/config" class="nav-item {% if request.path == '/config' %}active{% endif %}">
                    <div class="menu-icon-wrapper"><i class="fa fa-cog nav-icon"></i></div>
                    <span class="sidebar-text">系统配置</span>
                </a>
            </nav>
        </aside>
        
        <!-- 移动端遮罩层 -->
        <div id="sidebar-overlay" class="fixed inset-0 bg-black/50 md:hidden opacity-0 pointer-events-none transition-opacity duration-300 z-30"></div>
        
        <!-- 主内容 -->
        <main class="flex-1 overflow-auto p-4">
            {% block content %}{% endblock %}
        </main>
    </div>

    <!-- 帮助文档弹窗 -->
    <div id="help-modal" class="fixed inset-0 z-50 flex items-center justify-center hidden opacity-0 modal-transition">
        <div class="absolute inset-0 bg-black bg-opacity-50 opacity-0 modal-transition" id="help-modal-overlay"></div>
        <div class="bg-white rounded-xl shadow-2xl max-w-3xl w-full max-h-[90vh] overflow-y-auto z-10 transform scale-95 transition-transform duration-300">
            <div class="p-6 border-b">
                <div class="flex justify-between items-center">
                    <h3 class="text-xl font-bold text-gray-800 flex items-center">
                        <i class="fa fa-book text-primary mr-2"></i>
                        Skit-Panel 使用帮助
                    </h3>
                    <button id="close-help-modal" class="text-gray-500 hover:text-gray-700">
                        <i class="fa fa-times text-xl"></i>
                    </button>
                </div>
            </div>
            <div class="p-6">
                <div class="space-y-6">
                    <div>
                        <h4 class="text-lg font-semibold text-gray-700 mb-3">项目简介</h4>
                        <p class="text-gray-600">Skit-Panel 是一个简洁高效的短剧管理工具，集成豆瓣电影刮削、国产刮削、其他刮削(JavDB)、TMDB电影/电视节目刮削、本地资源管理、本地资源播放、飞牛媒体库集成、Emby媒体库集成、PTSkit站点种子搜索以及qBittorrent和Transmission下载器管理等多种功能，支持本地资源生成NFO文件和下载封面海报。</p>
                    </div>
                    
                    <div>
                        <h4 class="text-lg font-semibold text-gray-700 mb-3">包含功能</h4>
                        <ul class="list-disc list-inside space-y-2 text-gray-600">
                            <li><strong>豆瓣电影搜索</strong>：通过关键词搜索豆瓣电影信息</li>
                            <li><strong>国产刮削</strong>：提供国产影视剧信息刮削功能，支持番号搜索和详情获取</li>
                            <li><strong>其他刮削</strong>：提供其他影视资源信息刮削功能，支持番号搜索和详情获取</li>
                            <li><strong>TMDB集成</strong>：使用The Movie Database API获取媒体信息和海报</li>
                            <li><strong>本地资源管理</strong>：管理和浏览本地媒体文件，支持搜索、筛选和排序功能</li>
                            <li><strong>本地影院</strong>：内置视频播放器，支持本地短剧资源浏览、播放和自动播放下一集功能</li>
                            <li><strong>PT站点种子搜索</strong>：搜索和管理PT站点种子资源，支持获取磁力链接和下载种子</li>
                            <li><strong>qBittorrent集成</strong>：管理qBittorrent下载客户端，支持任务管理和监控</li>
                            <li><strong>Transmission集成</strong>：管理Transmission下载客户端，支持任务管理和监控</li>
                            <li><strong>飞牛媒体库集成</strong>：连接飞牛媒体库，浏览和管理媒体库内容</li>
                            <li><strong>Emby媒体库集成</strong>：管理Emby媒体服务器上的资源，支持浏览和搜索</li>
                            <li><strong>系统配置管理</strong>：支持配置豆瓣Cookie、用户代理、存储路径和下载器连接参数</li>
                            <li><strong>电影详情查看</strong>：获取电影完整信息，包括简介、演职员、评分等</li>
                            <li><strong>NFO文件生成</strong>：自动生成符合Kodi等媒体中心要求的NFO文件</li>
                            <li><strong>海报图片下载</strong>：自动下载电影海报并保存到本地</li>
                            <li><strong>Docker支持</strong>：提供Docker和Docker Compose部署方案，方便快速搭建</li>
                            <li><strong>数据持久化</strong>：支持NFO文件、海报和配置的持久化存储</li>
                            <li><strong>响应式设计</strong>：适配各种设备屏幕，包括桌面端和移动端</li>
                        </ul>
                    </div>
                    
                    <div>
                        <h4 class="text-lg font-semibold text-gray-700 mb-3">使用指南</h4>
                        <div class="space-y-4">
                            <div>
                                <h5 class="font-medium text-gray-700">1. 系统配置</h5>
                                <p class="text-gray-600">首次使用前，访问配置页面设置各项参数，包括豆瓣Cookie、TMDB API密钥、PT站点信息、下载器连接参数和媒体库连接信息等。确保所有必要配置正确填写以保证功能正常运行。</p>
                            </div>
                            <div>
                                <h5 class="font-medium text-gray-700">2. 豆瓣刮削</h5>
                                <p class="text-gray-600">在豆瓣刮削页面，输入电影或电视剧名称，点击搜索按钮获取相关信息。搜索结果以列表形式展示，点击结果项可查看电影详情，支持下载海报和生成NFO文件。</p>
                            </div>
                            <div>
                                <h5 class="font-medium text-gray-700">3. 国产刮削</h5>
                                <p class="text-gray-600">在国产刮削页面，输入影视剧番号进行搜索。搜索结果以列表形式展示，仅显示番号信息，点击结果项可查看详情，支持下载海报和生成NFO文件。</p>
                            </div>
                            <div>
                                <h5 class="font-medium text-gray-700">4. 其他刮削</h5>
                                <p class="text-gray-600">在其他刮削页面，输入影视剧番号进行搜索。搜索结果以列表形式展示，显示标题和番号信息，点击结果项可查看详情，支持下载海报和生成NFO文件。</p>
                            </div>
                            <div>
                                <h5 class="font-medium text-gray-700">5. TMDB工具</h5>
                                <p class="text-gray-600">在TMDB页面，输入电影或电视剧名称进行搜索。搜索结果以卡片式布局展示，点击卡片可查看媒体详情，支持下载海报和生成符合媒体中心要求的NFO文件。</p>
                            </div>
                            <div>
                                <h5 class="font-medium text-gray-700">6. 本地资源管理</h5>
                                <p class="text-gray-600">浏览本地磁盘上的媒体文件，支持通过搜索框、资源类型筛选器和排序选项来查找和整理资源。点击资源卡片上的"刮削信息"按钮可以跳转到相应刮削页面，获取详细媒体信息。</p>
                            </div>
                            <div>
                                <h5 class="font-medium text-gray-700">7. 本地影院</h5>
                                <p class="text-gray-600">浏览本地短剧资源，支持文件夹导航和搜索功能。点击视频文件即可在页面上播放，支持自动播放下一集功能，提供全屏播放、视频信息显示等丰富功能。</p>
                            </div>
                            <div>
                                <h5 class="font-medium text-gray-700">8. PT站点种子搜索</h5>
                                <p class="text-gray-600">输入种子名称进行搜索，查看搜索结果，包括种子名称、大小、发布时间、完成度等详细信息。点击"获取磁力链接"或"下载种子"按钮获取资源，支持一键添加到下载器。</p>
                            </div>
                            <div>
                                <h5 class="font-medium text-gray-700">9. 下载管理</h5>
                                <p class="text-gray-600">通过qBittorrent和Transmission页面，管理正在下载和已完成的任务，支持添加新下载任务、暂停/恢复任务、删除任务等操作，实时监控下载进度和速度。</p>
                            </div>
                            <div>
                                <h5 class="font-medium text-gray-700">10. 媒体库</h5>
                                <p class="text-gray-600">在飞牛媒体库和Emby媒体库页面，查看和管理远程媒体服务器上的资源，支持浏览媒体库列表和媒体条目，查看详细信息，方便管理多平台媒体资源。</p>
                            </div>
                        </div>
                    </div>
                    
                    <div>
                        <h4 class="text-lg font-semibold text-gray-700 mb-3">注意事项</h4>
                        <ul class="list-disc list-inside space-y-2 text-gray-600">
                            <li>使用前请确保在系统配置中正确设置了各项API密钥和路径</li>
                            <li>部分功能需要网络连接才能正常使用，请确保网络通畅</li>
                            <li>下载功能需要配置相应的下载客户端，并确保客户端处于运行状态</li>
                            <li>媒体库功能需要正确配置媒体服务器连接信息，包括地址、端口和认证信息</li>
                            <li>请确保配置有效的豆瓣Cookie，否则可能无法获取完整的电影信息</li>
                            <li>使用Docker部署时，首次启动会自动创建默认配置文件，可根据需要进行修改</li>
                            <li>生成的NFO文件符合Kodi等媒体中心的格式要求，放置在媒体文件同一目录下即可被识别</li>
                            <li>本地资源管理功能默认读取 /app/skit 目录，在Docker部署时需要正确映射此目录到宿主机</li>
                            <li>移动端访问时，可点击页面左上角的菜单按钮打开侧边栏进行功能导航</li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="p-6 border-t bg-gray-50">
                <button id="help-modal-close-btn" class="bg-primary hover:bg-primary/90 text-white font-medium py-2 px-4 rounded-lg transition-colors duration-200 w-full">
                    我知道了
                </button>
            </div>
        </div>
    </div>

    <!-- 页脚 -->
    <footer class="bg-white py-6 border-t-2 border-gray-100 shadow-inner">
        <div class="container mx-auto px-4 text-center text-gray-500 text-sm">
            <p>© 2025 Skit-Panel 短剧管理面板 - 作者：DoubleStackWorkShop</p>
        </div>
    </footer>

    <!-- Base JavaScript -->
    <script src="{{ url_for('static', filename='js/base.js') }}"></script>
    
    <!-- Page specific JavaScript will be loaded here -->
    {% block scripts %}{% endblock %}
</body>
</html>
